<template>
  <div class="table">
    <!-- 数据提示内容 -->
    <el-alert
          :title="`数据一共${list.length}条`"
          type="info"
          show-icon
          :closable="false"
          class="infoMessage"
        ></el-alert>
    <!-- 表格主体部分 -->
    <el-table :data="list" border style="width: 100%">
      <el-table-column prop="number" label="试题编号" width="150"></el-table-column>
      <el-table-column prop="subject" label="学科" width="120"></el-table-column>
      <el-table-column prop="catalog" label="目录" width="120"></el-table-column>
      <el-table-column :formatter="questionTypeFormatter" prop="questionType" label="题型" width="120"></el-table-column>
      <el-table-column prop="question" label="题干" width="350">
        <template slot-scope="scope">
          <span v-html="scope.row.question"></span>
        </template>
      </el-table-column>
      <el-table-column prop="addDate" label="录入时间"  width="180">
        <template slot-scope="scope">
          <span>{{scope.row.addDate | parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}")}}</span>
        </template>
      </el-table-column>
      <el-table-column :formatter="difficultyFormatter" prop="difficulty" label="难度" width="120"></el-table-column>
      <el-table-column prop="creator" label="录入人" width="120"> </el-table-column>
      <el-table-column :formatter="chkStateFormatter" prop="chkState" label="审核状态" width="120"></el-table-column>
      <el-table-column prop="chkRemarks" label="审核意见" width="180"></el-table-column>
      <el-table-column prop="chkUser" label="审核人" width="120"></el-table-column>
      <el-table-column :formatter="publishStateFormatter" prop="publishState" label="发布状态" width="120"></el-table-column>
      <!-- 表格右侧固定列 -->
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            @click="previewBtn(scope.row)"
            type="text"
            size="small"
          >预览</el-button>
          <el-button
            type="text"
            size="small"
            :disabled="scope.row.chkState === 1"
            @click="checkBtn(scope.row)"
          >审核</el-button>
          <el-button
            type="text"
            size="small"
            :disabled="scope.row.publishState === 1"
            @click="$router.push({ path: '/questions/new', query: { id: scope.row.id } })"
          >修改</el-button>
          <el-button
            type="text"
            size="small"
            @click="downBtn(scope.row)"
          >{{ !scope.row.publishState ? "上架" : "下架" }}</el-button>
          <el-button
            type="text"
            size="small"
            :disabled="scope.row.publishState === 1"
            @click="deleteBtn(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格分页部分 -->
    <el-row type="flex" justify="end">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[5, 10, 15]"
          :page-size="pagesize"
          layout="prev, pager, next, sizes, jumper"
          :total="Math.ceil(list.length / 5)"
          background
        ></el-pagination>
      </div>
    </el-row>
    <!-- 试题预览弹出层 -->
    <QuestionPreview
      v-if="dialogTableVisible"
      :dialogTableVisible.sync="dialogTableVisible"
      :questionData="questionData"
      @closeBtn="dialogTableVisible = false"
    ></QuestionPreview>
    <!-- 试题审核弹出层 -->
    <QuestionCheck
      v-if="showCheckDialog"
      :showCheckDialog.sync="showCheckDialog"
      :currentData="currentData"
      @update-page="$emit('update-page')"
    ></QuestionCheck>
  </div>
</template>

<script>
import { choicePublish, remove, detail } from '@/api/hmmm/questions.js'
import QuestionPreview from '../components/questions-preview.vue'
import QuestionCheck from '../components/questions-check.vue'

export default {
  name: 'Table',
  components: {
    QuestionPreview,
    QuestionCheck
  },
  props: {
    // 表格数据
    list: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      currentPage: 1,
      // 试题预览弹出层
      dialogTableVisible: false,
      // 试题审核弹出层
      showCheckDialog: false,
      // 当前试题数据（预览）
      questionData: {},
      // 当前试题数据（审核）
      currentData: {},
      // 当前页数
      page: 1,
      // 每页条目数
      pagesize: 5
    }
  },
  created () {
  },
  methods: {
    handleClick (row) {
      console.log(row)
    },
    // 格式化题型
    questionTypeFormatter (row) {
      if (row.questionType === '1') {
        return '单选'
      } else if (row.questionType === '2') {
        return '多选'
      } else if (row.questionType === '3') {
        return '简答'
      }
    },
    // 格式化难度
    difficultyFormatter (row) {
      if (row.difficulty === '1') {
        return '简单'
      } else if (row.difficulty === '2') {
        return '一般'
      } else if (row.difficulty === '3') {
        return '困难'
      }
    },
    // 格式化审核状态
    chkStateFormatter (row) {
      if (row.chkState === 0) {
        return '待审核'
      } else if (row.chkState === 1) {
        return '已审核'
      } else if (row.chkState === 2) {
        return '已拒绝'
      }
    },
    // 格式化发布状态
    publishStateFormatter (row) {
      if (row.publishState === 0 && row.chkState === 1) {
        return '已下架'
      } else if (row.publishState === 1 && row.chkState === 1) {
        return '已发布'
      } else if (row.chkState === 0 || row.chkState === 2) {
        return '待发布'
      }
    },
    // 预览按钮
    async previewBtn (row) {
      const { data } = await detail(row)
      this.questionData = data
      this.dialogTableVisible = true
    },
    // 审核按钮
    checkBtn (row) {
      this.currentData = row
      this.showCheckDialog = true
    },
    // 上架&下架按钮
    downBtn (row) {
      const text = row.publishState === 1 ? '下架' : '上架'
      this.$confirm('您确认' + text + '这道题目?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await choicePublish({
          publishState: row.publishState === 1 ? 0 : 1,
          id: row.id
        })
        this.$message({
          type: 'success',
          message: text + '成功!'
        })
        this.$emit('update-page')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消' + text
        })
      })
    },
    // 删除按钮
    deleteBtn (row) {
      this.$confirm('此操作将永久删除题目,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 基础题库删除api
        await remove(row)
        this.$emit('update-page')
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 每页条目数变化时
    handleSizeChange (pagesize) {
      this.page = 1
      this.pagesize = pagesize
      this.$emit('update-page')
    },
    // 切换页面时
    handleCurrentChange (page) {
      this.page = page
      this.$emit('update-page')
    }
  }
}

</script>

<style>

</style>
